<template>
  <div class="container">

    <v-header :title="title"></v-header>

    <div class="content">
      <ul class="info-list">
        <li class="list-item" @click="setAvatar">
          <div class="view-left">
            <span class="title">头像</span>
          </div>
          <div class="view-right">
            <div class="avatar-box">
              <img class="avatar" :src="domain_name + avatar" v-show="avatar" />
            </div>
            <i class="icon"></i>
          </div>
          <!-- 文件上传触发框 隐藏 -->
          <input type="file" name="file" class="upload_avatar" @change="changeAvatar"  
            accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput">
        </li>
        
        <li class="list-item" @click="setName">
          <div class="view-left">
            <span class="title">昵称</span>
          </div>
          <div class="view-right">
            <span class="text">{{userName ? userName : '未设置'}}</span>
            <i class="icon"></i>
          </div>
        </li>

        <li class="list-item" @click="setSex">
          <div class="view-left">
            <span class="title">性别</span>
          </div>
          <div class="view-right">
            <span class="text">{{sex}}</span>
            <i class="icon"></i>
          </div>
        </li>

        <li class="list-item" @click="pickDate">
          <div class="view-left">
            <span class="title">生日</span>
          </div>
          <div class="view-right">
            <span class="text">
              {{birthday ? birthday : '未设置'}}
            </span>
            <i class="icon"></i>
          </div>
        </li>

        <!-- <li class="list-item" @click="setPhone">
          <div class="view-left">
            <span class="title">{{userPhone ? '修改绑定手机' : '绑定手机'}}</span>
          </div>
          <div class="view-right">
            <span class="text">{{userPhone ? userPhone : '未绑定'}}</span>
            <i class="icon"></i>
          </div>
        </li> -->

        <li class="list-item" @click="setPassword">
          <div class="view-left">
            <span class="title">修改密码</span>
          </div>
          <div class="view-right">

            <i class="icon"></i>
          </div>
        </li>  
      </ul>
      
    </div>

    <div class="quit-btn" @click="quit">退出帐号</div>

    <v-mask :show="isShowLoading">
      <loading :msg="loadingMsg"></loading>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'
import VMask from 'components/v-mask'
import Loading from 'components/loading'

import { ERR_OK, domain_name } from "api/config.js"
import { UpdateBirthday, UpdatePhoto } from "api/user.js"

export default {
  data() {
    return {
      title: '编辑资料',
      domain_name: domain_name,
      userId: Number,
      avatar: '',
      userName: '',
      userSex: '',
      birthday: '',
      userPhone: '',
      isShowLoading: false,
      loadingMsg: ''
    }
  },
  components: {
    VHeader,
    VMask,
    Loading
  },
  mounted() {
    this.userId = this.$store.state.userInfo.userId

    let avatar = this.$store.state.userInfo.userPhoto
    this.avatar = avatar 

    let userName = this.$store.state.userInfo.userName
    this.userName = userName 

    let userSex = this.$store.state.userInfo.userSex
    this.userSex = userSex

    let birthday = this.$store.state.userInfo.userBithday
    this.birthday = birthday

    let userPhone = this.$store.state.userInfo.userPhone
    this.userPhone = userPhone


    if (localStorage.cropperImg) {
      let avatar = localStorage.cropperImg.split(',')[1]
      this.updateAvatar(avatar)
      localStorage.removeItem('cropperImg')
    }
  },
  methods: {
    setAvatar: function () {
      this.$refs.avatarInput.click() // 点击头像->触发file点击事件
      
      
    },

    changeAvatar: function (e) {  // 图片上传处理

      let file = e.target.files[0] //头像
      console.log(file)
      let reader = new FileReader()
      let _this = this
      reader.readAsDataURL(file)  //转成base64码
      reader.onload = function(e) {  //读取成功回调
        let avatar = this.result //获取结果
        console.log(e)

        _this.$router.push({
          path: '/cropper',
          query: {
            img: avatar
          }
        })
        
      }

    },
    updateAvatar: function (avatar) {
      UpdatePhoto({
        userId: this.userId,
        userPhoto: avatar
      }).then((res) => {
        this.isShowLoading = false 
        if (res.code == ERR_OK) {
          this.avatar = res.object.userPhoto
          this.$store.state.userInfo.userPhoto = res.object.userPhoto

          mui.toast('头像上传成功')
        } else {
          mui.toast(res.object)
        }
      }).catch(() => {
        this.isShowLoading = false  
      })
    },

    setName: function () {
      this.$router.push({
        path: '/edit/name'
      })
    },

    setSex: function () {
      this.$router.push({
        path: '/edit/sex'
      })
    },

    pickDate: function () {
      let options = { //日期选择器配置项
        type:'date',
        beginYear: 1920,
        endYear: new Date().getFullYear()
      }
      if (this.birthday) { //若已设置过日期 初始化指定列表选中项
        options = Object.assign({value: this.birthday}, options)
        console.log(options)
      }
      let _this = this
      let dtPicker = new mui.DtPicker(options); //初始化 日期选择器
      dtPicker.show(function (selected) {
        //生日 = 年 + 月 + 日
        _this.birthday = `${selected.y.value}-${selected.m.value}-${selected.d.value}`
        
        _this.isShowLoading = true
        _this.loadingMsg = '更改生日'
        UpdateBirthday({
          userId: _this.userId,
          userBithday: _this.birthday
        }).then((res) => {
          _this.isShowLoading = false
          if (res.code == ERR_OK) {
            _this.$store.state.userInfo.userBithday = res.object.userBithday
          } else {
            mui.toast(res.object)
          }
        }).catch(() => {
          _this.isShowLoading = false
        })

        dtPicker.dispose()
      })
    },

    // setPhone: function () {
    //   if (!this.phone) {
    //     this.$router.push({ //绑定手机
    //       path: '/edit/phone'
    //     })
    //   } else {
    //     this.$router.push({ //修改绑定手机
    //       path: '/edit/newphone'
    //     })
    //   }
      
    // },

    setPassword: function () {
      this.$router.push({
        path: '/edit/newpassword'
      })
    },

    quit: function () {
      localStorage.clear()
      this.$router.replace({
        path: '/login'
      })
    }
  },

  computed: {
    sex () {
      let sex = this.userSex
      if (sex == 1) {
        return '男'
      } else if (sex == 2) {
        return '女'
      } else {
        return '未设置'
      }
    },
    date () {
      let birthday = this.birthday
      let date = birthday.split('-')
      return {
        y: date[0],
        m: date[1],
        d: date[2]
      }
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color $color-bg-gray
  .content 
    background-color #fff
    .info-list
      font-size $font-size-small
      color #333333
      .list-item
        display flex
        align-items center
        justify-content space-between
        width 100%
        height 50px
        border-bottom-1px(rgba(0, 0, 0, .1)) 
        .view-left
          padding-left 20px
        .view-right
          padding-right 20px
          .avatar-box
            display inline-block  
            vertical-align middle
            width 32px
            height 32px
            border-radius 50%
            background-color #f2f2f2
            .avatar
              width 32px
              height 32px
              border-radius 50%
          .text
            display inline-block
            vertical-align middle
          .icon
            display inline-block
            vertical-align middle
            width 8px
            height 14px
            margin-left 20px
            background-size 8px 14px
            bg-image('../../common/images/more')
      .upload_avatar
        display none 
  .quit-btn
    margin 100px 20px 0
    height 40px
    line-height 40px
    text-align center
    border-radius 2px
    background-color $color-theme
    color #ffffff
    font-size $font-size-medium

</style>
